<div class="content-heading">New Article</div>
<div class="container-fluid">
    <alert type="info">
        <em class="fa fa-exclamation-circle fa-lg fa-fw"></em>
        <span>There is an autosaved version of this article that is more recent than the version below. <a href="#" class="text-white">Restore</a></span>
    </alert>
    <div class="row">
        <!-- Article Content-->
        <div class="col-lg-9">
            <div class="panel panel-default">
                <div class="panel-body">
                    <form action="">
                        <input class="mb-lg form-control input-lg" type="text" name="article-title" placeholder="Article title..." />
                        <!-- Wysiswyg editor-->
                        <div id="summernote" class="summernote">
                            <span>Rich text presentation here..</span>
                        </div>
                        <br/>
                        <p>Notes</p>
                        <textarea class="mb-lg form-control" cols="6"></textarea>
                        <div class="clearfix">
                            <div class="pull-left">
                                <button class="btn btn-default m-r-10 m-t-10" type="button">
                                    <em class="fa fa-edit fa-fw"></em>Draft</button>
                                <button class="btn btn-primary m-t-10" type="button">
                                    <em class="fa fa-check fa-fw"></em>Save</button>
                            </div>
                            <div class="pull-right">
                                <button class="btn btn-danger m-r-10 m-t-10" type="button">
                                    <em class="fa fa-trash fa-fw"></em>Remove</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <p class="lead">List of Comments</p>
            <div class="panel">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>
                                    <strong>Comment ID</strong>
                                </th>
                                <th>
                                    <strong>Date</strong>
                                </th>
                                <th>
                                    <strong>Username</strong>
                                </th>
                                <th>
                                    <strong>Comment excerpt</strong>
                                </th>
                                <th class="text-center">
                                    <strong>Current status</strong>
                                </th>
                                <th class="text-right" style="width:130px">
                                    <strong>Actions</strong>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>123</td>
                                <td>10/05/2015</td>
                                <td><a href="">Jack Jordan</a>
                                </td>
                                <td>Sed quis eros libero, a euismod nisl....</td>
                                <td class="text-center">
                                    <span class="label label-success">Approved</span>
                                </td>
                                <td class="text-right">
                                    <button class="btn btn-sm btn-default" type="button">
                                        <em class="fa fa-pencil"></em>
                                    </button>
                                    <button class="btn btn-sm btn-danger" type="button">
                                        <em class="fa fa-trash"></em>
                                    </button>
                                    <button class="btn btn-sm btn-success" type="button">
                                        <em class="fa fa-check"></em>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>456</td>
                                <td>10/07/2015</td>
                                <td><a href="">Hailey Mckinney</a>
                                </td>
                                <td>Nulla facilisi.</td>
                                <td class="text-center">
                                    <span class="label label-success">Approved</span>
                                </td>
                                <td class="text-right">
                                    <button class="btn btn-sm btn-default" type="button">
                                        <em class="fa fa-pencil"></em>
                                    </button>
                                    <button class="btn btn-sm btn-danger" type="button">
                                        <em class="fa fa-trash"></em>
                                    </button>
                                    <button class="btn btn-sm btn-success" type="button">
                                        <em class="fa fa-check"></em>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>789</td>
                                <td>11/05/2015</td>
                                <td><a href="">Peyton Reyes</a>
                                </td>
                                <td>Quisque enim nisi, semper non pulvinar et, aliquam id lorem...</td>
                                <td class="text-center">
                                    <span class="label label-warning">Pending</span>
                                </td>
                                <td class="text-right">
                                    <button class="btn btn-sm btn-default" type="button">
                                        <em class="fa fa-pencil"></em>
                                    </button>
                                    <button class="btn btn-sm btn-danger" type="button">
                                        <em class="fa fa-trash"></em>
                                    </button>
                                    <button class="btn btn-sm btn-success" type="button">
                                        <em class="fa fa-check"></em>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td>999</td>
                                <td>10/06/2015</td>
                                <td><a href="">Darryl Harper</a>
                                </td>
                                <td>Nulla facilisi.</td>
                                <td class="text-center">
                                    <span class="label label-danger">Rejected</span>
                                </td>
                                <td class="text-right">
                                    <button class="btn btn-sm btn-default" type="button">
                                        <em class="fa fa-pencil"></em>
                                    </button>
                                    <button class="btn btn-sm btn-danger" type="button" disabled="">
                                        <em class="fa fa-trash"></em>
                                    </button>
                                    <button class="btn btn-sm btn-success" type="button">
                                        <em class="fa fa-check"></em>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- Article sidebar-->
        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-body">
                    <p class="lead">Article Data</p>
                    <p>Categories</p>
                    <ng-select class="mb-lg" (data)="valueCategory" [multiple]="true" [items]="itemsCategories"></ng-select>
                    <p>Tags</p>
                    <ng-select class="mb-lg" (data)="valueTag" [multiple]="true" [items]="itemsTags"></ng-select>
                    <p>Reviewers</p>
                    <ng-select class="mb-lg" (data)="valueReview" [multiple]="true" [items]="itemsReview"></ng-select>
                    <p class="lead">SEO Metadata</p>
                    <div class="form-group">
                        <p>Title</p>
                        <input class="form-control" type="text" placeholder="Brief description.." />
                    </div>
                    <div class="form-group">
                        <p>Description</p>
                        <textarea class="form-control" rows="5" placeholder="Max 255 characters..."></textarea>
                    </div>
                    <div class="form-group">
                        <p>Keywords</p>
                        <textarea class="form-control" rows="5" placeholder="Max 1000 characters..."></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
